<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('供热系统')" />
</head>
<body class="gray-cg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <!-- 上部按钮 -->
        <div class="row">
            <div class="col-xs-12 text-right">
                <button class="btn btn-large btn-opt" type="button"
                        onclick="handleImportClick()">数据导入</button>
                <input type="file" id="fileInput" accept=".xls,.xlsx"
                       style="display: none;" onchange="handleFileChange()">
            </div>
        </div>

        <!-- 中部表格 -->
        <div class="row margin-top">
            <div class="col-xs-12 col-md-4">
                <div class="title-box">
                    <button class="btn btn-large dp-btn-title" type="button">节点</button>
                </div>
                <div class="table-scroll" style="height: 300px;">
                    <table class="dp-table" id="table1"></table>
                </div>
            </div>

            <div class="col-xs-12 col-md-8">
                <div class="title-box">
                    <button class="btn btn-large dp-btn-title"
                            type="button">管道</button>
                </div>
                <div class="table-scroll" style="height: 200px;">
                    <table class="dp-table" id="table2"></table>
                </div>
            </div>
        </div>

        <!-- 下部备注 -->
        <div class="row footer footer-box">
            <div class="col-xs-12">
                <div class="footer-title">功能说明</div>
                <div class="footer-content">基于</div>
            </div>
        </div>

    </div>
</div>
</body>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "model/heating";

    $(function() {
        const options1 = {
            id: 'table1',
            data: [],
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            columns: [
                {
                    field: 'nodeNumber',
                    title: '节点编号',
                    align: 'center',
                },
                {
                    field: 'heatingLevel',
                    title: '所属</br>供热线路',
                    align: 'center',
                },
                {
                    field: 'nodeDesc',
                    title: '节点说明',
                },
            ]
        };
        $.table.init(options1);

        const options2 = {
            id: 'table2',
            data: [],
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            columns: [
                {
                    field: 'pipNumber',
                    title: '管道</br>编号',
                    align: 'center',
                },
                {
                    field: 'startNode',
                    title: '始端节点',
                    align: 'center',
                },
                {
                    field: 'endNode',
                    title: '末端节点',
                    align: 'center',
                },
                {
                    field: 'pipLength',
                    title: '管道长度</br>(m)',
                    align: 'center',
                },
                {
                    field: 'pipDiameter',
                    title: '管道直径</br>(m)',
                    align: 'center',
                },
                {
                    field: 'lineDesc',
                    title: '线路</br>说明',
                },
            ]
        };
        $.table.init(options2);
    });

    function importExcel() {
        const formData = new FormData();
        const fileInput = document.getElementById('fileInput');
        if (fileInput.files[0] == null) {
            $.modal.alertWarning("请先选择文件路径");
            return false;
        }
        formData.append('file', fileInput.files[0]);

        $.ajax({
            type: "post",
            url: prefix + "/importData",
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                console.log(data);
                if (data.code === 0) {
                    const dataMap = data.data;
                    // 刷新表格数据
                    let index = 1;
                    dataMap.forEach((value) => {
                        $('#table' + index).bootstrapTable('load', value || []);
                        index++;
                    });
                    $.modal.msgSuccess("数据导入成功");
                } else {
                    $.modal.msgError('数据导入失败！');
                }
            },
            error: function(xhr, status, error) {
                $.modal.msgError('数据导入失败！');
                console.error('Error:', error);
            }
        });

    }

    function handleImportClick() {
        const fileInput = document.getElementById('fileInput');
        fileInput.click();
    }

    function handleFileChange() {
        importExcel();
    }
</script>
<style type="text/css">

</style>
</html>